<template>
  <div>
    <a-page-header class="dashboard-workplace-page-header" title="工作台">
      <div class="dashboard-workplace-header-left">
        <a-avatar :src="avatarUrl" icon="user" class="dashboard-workplace-header-avatar" />
        <div class="dashboard-workplace-header-tip">
          <p class="dashboard-workplace-header-tip-title">{{hello}}{{userName}}，开始新的写作吧！</p>
          <p class="dashboard-workplace-header-tip-desc">今日阴转小雨，22℃ - 32℃，出门记得带伞哦。</p>
        </div>
      </div>
      <div class="dashboard-workplace-header-right">
        <div class="dashboard-workplace-header-extra">
          <a-row type="flex" justify="end">
            <template v-for="(item,index) in extraData">
              <a-col :span="8" class="dashboard-workplace-header-extra-item" :key="index">
                <icon-font class="dashboard-workplace-header-extra-item-icon" :type="item.icon" />
                <span class="dashboard-workplace-header-extra-title">{{item.title}}</span>
                <p class="dashboard-workplace-header-extra-content">{{item.content}}</p>
              </a-col>
            </template>
          </a-row>
        </div>
      </div>
    </a-page-header>
    <div class="dashboard-workplace-page-content">
      <a-row :gutter="24">
        <a-col :xl="16" :xs="24" class="qc-mb-16">
          <a-card :bordered="false">
            <span slot="title">
              <icon-font type="icon-article" />
              <span style="margin-left:8px">我的文章</span>
            </span>
            <template slot="extra">
              <router-link to="/dashboard/userInfo">
                <span>全部项目</span>
              </router-link>
            </template>
            <a-list :grid="{ gutter: 24, column: 3 }" :data-source="articleData">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-card hoverable>
                  <img slot="cover" alt="example" :src="item.imgUrl" />
                  <a-card-meta :title="item.title">
                    <template slot="description">{{item.description}}</template>
                  </a-card-meta>
                </a-card>
              </a-list-item>
            </a-list>
          </a-card>
        </a-col>
        <a-col :xl="8" :xs="24" class="qc-mb-16">
          <a-card :bordered="false" style="height:400px">
            <span slot="title">
              <icon-font type="icon-agency" />
              <span style="margin-left:8px">快捷操作</span>
            </span>
            <a-icon slot="extra" type="setting"></a-icon>正在开发中......
          </a-card>
        </a-col>
        <a-col :xl="16" :xs="24" class="qc-mb-16">
          <a-card :bordered="false">
            <span slot="title">
              <icon-font type="icon-article" />
              <span style="margin-left:8px">动态</span>
            </span>
            <a-list item-layout="horizontal" :data-source="dynamicData">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta :description="item.description">
                  <a slot="title">{{ item.title }}</a>
                  <a-avatar slot="avatar" :src="avatarUrl" />
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import { viewImgApi } from "@/api/common";
const articleData = [];
for (let i = 1; i <= 3; i++) {
  articleData.push({
    href: "https://www.jiubanqingchen.com/",
    title: `久伴轻尘的文章 ${i}`,
    imgUrl:
      "https://www.jiubanqingchen.com/fileserver/2019-11-22/newsTitle/20191122184712.jpg",
    description: "久伴轻尘,future-template",
    content:
      "正在使用 jfinal 和 ant design vue 开发一个极速开发平台，他可以轻松的构建后台文件与前端代码，jfianl极速的开发体验与ant design vue 极致的视觉体验，让后端开发给人不一样的快感。"
  });
}
const extraData = [
  { title: "文章", content: 12, icon: "icon-article" },
  { title: "代办", content: "3/24", icon: "icon-agency" },
  { title: "邮件", content: 12, icon: "icon-email" }
];

const dynamicData = [
  {
    title: "久伴轻尘新增了个人中心功能",
    description: "2020/06/07 21:04:58"
  },
  {
    title: "久伴轻尘新增了文章jFinal sql模板模块化管理",
    description: "2020/06/07 21:04:58"
  },
  {
    title: "久伴轻尘新增了工作台功能",
    description: "2020/06/07 21:04:58"
  },
  {
    title: "久伴轻尘新增了文章jFinal+element 用户头像上传",
    description: "2020/06/07 21:04:58"
  },
  {
    title: "久伴轻尘新增了个人中心功能",
    description: "2020/06/07 21:04:58"
  },
  {
    title: "久伴轻尘新增了文章jFinal sql模板模块化管理",
    description: "2020/06/07 21:04:58"
  },
  {
    title: "久伴轻尘新增了工作台功能",
    description: "2020/06/07 21:04:58"
  },
  {
    title: "久伴轻尘新增了文章jFinal+element 用户头像上传",
    description: "2020/06/07 21:04:58"
  }
];
export default {
  data() {
    return {
      avatar: this.$store.getters.avatar,
      articleData,
      extraData,
      dynamicData
    };
  },
  computed: {
    avatarUrl() {
      return viewImgApi + this.avatar;
    },
    userName() {
      return this.$store.getters.userName;
    },
    hello() {
      var hour = new Date().getHours();
      if (hour < 12) {
        return "早上好！";
      } else if (hour < 18) {
        return "下午好！";
      } else {
        return "晚上好！";
      }
    }
  }
};
</script>

<style>
.dashboard-workplace-page-header {
  margin: -24px -24px 0 -24px;
  background-color: #fff;
  border: 1px solid rgb(235, 237, 240);
}

.dashboard-workplace-header-left {
  float: left;
}

.dashboard-workplace-header-avatar {
  width: 64px;
  height: 64px;
  margin-right: 16px;
}

.dashboard-workplace-header-tip {
  display: inline-block;
  vertical-align: middle;
}

.dashboard-workplace-header-tip-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.dashboard-workplace-header-tip-desc {
  color: #808695;
  margin-bottom: 0;
}

.dashboard-workplace-header-right {
  height: 64px;
  float: right;
}
.dashboard-workplace-header-extra {
  min-width: 244px;
}

.dashboard-workplace-header-extra-item {
  text-align: right;
}

.dashboard-workplace-header-extra-item-icon {
  margin-right: 4px;
}

.dashboard-workplace-header-extra-title {
  color: #808695;
}
.dashboard-workplace-header-extra-content {
  font-size: 22px;
}
.dashboard-workplace-page-content {
  margin-top: 24px;
}
.qc-mb-16 {
  margin-bottom: 16px !important;
}
</style>
